<!--
 @description FieldAudio
 @fileName index.vue
 @author zengqiongying
 @created 2022/10/30 14:30:03
-->
<template>
  <div>
    <div class="c-audio-field">
      <Item v-if="showNote" :src="src" />
      <img v-if="!readOnly" slot="right" class="icon-audio" src="@/assets/icon-audio.png" @click.stop="handleOpenPop">
    </div>
    <Popup
      v-if="!readOnly && showPop"
      v-model="showPop"
      position="bottom"
      :src="src"
      :title="title"
      :clear="showClear"
      :show-cancel-button="false"
      :show-confirm-button="false"
      @clear="handleClear"
    >
      <Voice v-model="src" @confirm="handleSubmit" />
    </Popup>
  </div>
</template>

<script>
import Popup from '@/components/Popup'
import Item from './Item'
import Voice from './Voice'
import { uploadFile } from '@/apis/optyCategory'
export default {
  name: 'FieldAudio',
  components: { Popup, Voice, Item },
  props: {
    value: {
      type: String,
      default: ''
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '语音'
    },
    clear: {
      type: Boolean,
      default: true
    },
    objectId: {
      type: String,
      default: ''
    },
    moduleType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      src: '',
      showPop: false
    }
  },

  computed: {
    showNote() {
      return this.src && this.src.length > 0
    },
    showClear() {
      return false
      /* const isVal = this.value !== null && this.value !== undefined && this.value !== ''
      return isVal && this.clear */
    }
  },
  watch: {
    value: {
      handler(val) {
        this.src = val
      },
      immediate: true
    }
  },

  created() {},
  activated() {},

  mounted() {},

  methods: {
    handleOpenPop() {
      this.showPop = true
    },
    handleClear() {
      this.src = ''
      this.handleSubmit('')
    },
    handleSubmit(base64Codes) {
      const file = this.convertBase64UrlToFile(base64Codes)
      const data = new FormData()
      data.append('moduleType', this.moduleType)
      data.append('objectId', this.objectId)
      data.append('isCoverOld', 1)
      data.append('file', file)
      uploadFile(data).then(res => {
        const { success, data } = res
        if (success === 1 && data) {
          this.$emit('input', base64Codes)
          this.showPop = false
        }
      })
    },
    /**
     * 将以base64的音频url数据转换为Blob
     * @param urlData  用url方式表示的base64 数据
     */
    convertBase64UrlToBlob(urlData) {
      const arr = urlData.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      var bytes = window.atob(arr[1]) // 去掉url的头，并转换为byte
      // 处理异常,将ascii码小于0的转换为大于0
      var ab = new ArrayBuffer(bytes.length)
      var ia = new Uint8Array(ab)
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i)
      }
      // return new Blob([ab], { type: 'audio/mp3' })
      return new Blob([ab], { type: mime })
    },
    /**
     * 将以base64的音频url数据转换为Blob
     * @param urlData  用url方式表示的base64 数据
     */
    convertBase64UrlToFile(urlData) {
      const arr = urlData.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const suffix = mime.split('/')[1]
      var bytes = window.atob(arr[1]) // 去掉url的头，并转换为byte
      const n = bytes.length

      // 处理异常,将ascii码小于0的转换为大于0
      var ab = new ArrayBuffer(n)
      var u8arr = new Uint8Array(n)
      for (var i = 0; i < n; i++) {
        u8arr[i] = bytes.charCodeAt(i)
      }
      return new File([u8arr], `${new Date().getTime()}.${suffix}`, {
        type: mime
      })
    }
  }
}

</script>
<style lang='less' scoped>
.c-audio-field{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .icon-audio{
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}
</style>
